<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>帧动画</title>
	<style type="text/css">
		canvas{
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');

var image = new Image();

image.onload = function () {
	// 实现图片绘制
	console.log(image.height);
	var imageWidth = image.width;
	var imageHeight = image.height;

	// 计算每个小人物的尺寸
	var personWidth = imageWidth/4;
	var personHeight = imageHeight/4;

	// 帧动画	在固定的时间间隔内更换显示胡图片 根据图片的索引
	var index = 0;

	// 绘制的在画布的中心
	// 图片绘制的起始点
	var x = ctx.canvas.width/2 - personWidth/2;
	var y = ctx.canvas.height/2 - personHeight/2;
	
	
	// 9个参数
	// 图片对象
	// 图片上定位的坐标 x y
	// 在图片截取多大区域 w h
	// 位置：绘制在画布上的坐标 x,y (相对于canvas定位)
	// 长宽：图片的大小 长和宽
	// 
	ctx.drawImage(image,0,0,personWidth,personHeight,x,y,personWidth,personHeight);
	setInterval(function () {
		index ++;
		ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
		ctx.drawImage(image,personWidth*index,0,personWidth,personHeight,x,y,personWidth,personHeight);
		if (index>=3) {
			index = 0;
		}
	},250);
	
}
image.src = 'image/04.png';

</script>
</html>